<template>
  <div>
    <el-cascader
      :options="cascaderData"
      :props="props"
      v-model="areaValue"
      style="width: 100%"
      change-on-select
      @change="handleItemChange"
    />
  </div>
</template>

<script>
import { fetchAreaList } from 'api/common'
import axios from 'axios'

export default {
  name: 'Index',
  props: {
    rank: {
      type: String,
      required: false
    }
  },
  data() {
    return {
      cascaderData: [],
      props: {
        value: 'SORTNO',
        children: 'cities',
        label: 'ITEMNAME'
      },
      selectAreaData: [],
      areaValue: []
    }
  },
  created() {
    this._fetchAreaList()
  },
  methods: {
    _fetchAreaList(val) {
      var self = this
      let idArea
      let sizeArea
      if (!val) {
        idArea = null
        sizeArea = 0
      } else if (val.length === 1) {
        idArea = val[0]
        sizeArea = val.length // 3:一级 4:二级 6:三级
      } else if (val.length === 2) {
        idArea = val[1]
        sizeArea = val.length // 3:一级 4:二级 6:三级
      }
      axios.get('./static/area.json').then((response) => {
        var Items = response.data.areaList
        if (sizeArea === 0) { // 初始化 加载一级 省
          Items.forEach((value) => {
            if (value['PARENTSORTNO'] == '0') {
              value['cities'] = []
              self.cascaderData.push(value)
            }
          })
        } else if (sizeArea === 1) { // 点击一级 加载二级 市
          self.cascaderData.map((value, i) => {
            if (value['SORTNO'] === val[0]) {
              if (!value.cities.length) {
                Items.forEach((val11) => {
                  if (val11['PARENTSORTNO'] == val[0]) {
                    val11['cities'] = []
                    value.cities.push(val11)
                  }
                })
              }
            }
          })
        } else if (sizeArea === 2) { // 点击二级 加载三级 区
          this.cascaderData.map((value, i) => {
            if (value['SORTNO'] === val[0]) {
              value.cities.map((value, i) => {
                if (value['SORTNO'] === val[1]) {
                  if (!value.cities.length) {
                    Items.forEach((val11) => {
                      if (val11['PARENTSORTNO'] == val[1]) {
                        value.cities.push(val11)
                      }
                    })
                  }
                }
              })
            }
          })
        }
      })
    },
    handleItemChange(val) {
      var self = this
      this._fetchAreaList(val)
      var selectAreaData = []
      val.forEach((value, index) => {
        if (index == '0') {
          for (var i = 0; i < self.cascaderData.length; i++) {
            if (self.cascaderData[i]['SORTNO'] == val[0]) {
              selectAreaData[0] = self.cascaderData[i]
            }
          }
        } else if (index == '1') {
          var cities1 = selectAreaData[0].cities
          for (var j = 0; j < cities1.length; j++) {
            if (cities1[j]['SORTNO'] == val[1]) {
              selectAreaData[1] = cities1[j]
            }
          }
        } else if (index == '2') {
          var cities2 = selectAreaData[1].cities
          for (var x = 0; x < cities2.length; x++) {
            if (cities2[x]['SORTNO'] == val[2]) {
              selectAreaData[2] = cities2[x]
            }
          }
        }
      })
      this.$emit('input', selectAreaData)
      this.$emit('change', selectAreaData)
    }
  }
}
</script>

<style scoped>

</style>
